<template>
  <div class='create'>
    <div class="title" v-if="!loading">
      <a-input
        v-model="postDetail.title"
        class="titleInput"
        placeholder="请输入标题"
        allow-clear
        @change="onChange"
      />
      <a-button
        type="primary"
        @click="postsEdit"
      >
        发布
      </a-button>
    </div>
    <mavon-editor
        v-if="!loading"
      class="markdownEditor"
      v-model="postDetail.content"
      :editorBackground="'#fff'"
      :previewBackground="'#fff'"
      :toolbars="toolbars"
      :externalLink="externalLink"
    />
    <a-spin class="loading" v-if="loading" size="large" tip="loading..."/>
  </div>
</template>

<script>
import * as api from "@/API/require"
export default {
  components: {},
  data () {
    return {
      postId: '',
      postDetail:{},
      loading:true,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        externalLink: false
      },
      externalLink: {
        markdown_css: function() {
          // 这是你的markdown css文件路径
          return '/markdown/github-markdown.min.css';
        },
        hljs_js: function() {
          // 这是你的hljs文件路径
          return '/highlightjs/highlight.min.js';
        },
        hljs_css: function(css) {
          // 这是你的代码高亮配色文件路径
          return '/highlightjs/styles/' + css + '.min.css';
        },
        hljs_lang: function(lang) {
          // 这是你的代码高亮语言解析路径
          return '/highlightjs/languages/' + lang + '.min.js';
        },
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          return '/katex/katex.min.css';
        },
        katex_js: function() {
          // 这是你的katex.js路径
          return '/katex/katex.min.js';
        },
      }
    };
  },
  computed: {},
  watch: {
    $route: {
      handler (newV) {
        if (newV.name == 'editor') {
          this.postId = this.$route.params.id
          this.getSinglePosts(this.postId)
        }
      },
      //   deep: true,
      immediate: true
    }
  },
  methods: {
    onChange () {
      console.log(this.context)
    },
    postsEdit () {
      api.postsEdit({
        title: this.postDetail.title,
        content: this.postDetail.content,
        postId:this.postId,
        id: JSON.parse(localStorage.getItem('userInfo')).id
      }).then(res => {
        this.$message.success(res.data.message, 2)
      })
    },
    // 获取文章
    getSinglePosts (id) {
      this.loading = true
      api.getSinglePosts({
        id: id
      }).then(res => {
        this.postDetail = res.data.posts
        this.loading = false
      })
    },
  },
  created () {
    this.postId = this.$route.params.id
    this.getSinglePosts(this.postId)
  },
  mounted () {

  },
}
</script>
<style lang="less" scoped>
.loading{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.create {
  height: ~'calc(100vh - 135px)';
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .titleInput {
      margin: 10px 5px 10px 0;
    }
  }
  .markdownEditor {
    height: ~'calc(100% - 52px)';
    min-width: unset;
    position: static;
  }
}
</style>